<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">

    <main class="max-w-6xl mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

        <!-- 左侧信息卡片 -->
        <div class="lg:col-span-4 space-y-6">
          <!-- 反馈指南卡片 -->
          <div
            class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-all duration-300">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-800">反馈指南</h3>
            </div>
            <div class="space-y-3 text-sm text-gray-600">
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
                <span>详细描述问题或建议，帮助我们更好地理解</span>
              </div>
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
                <span>选择合适的反馈类型，便于我们分类处理</span>
              </div>
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
                <span>我们会在24小时内回复您的反馈</span>
              </div>
            </div>
          </div>

          <!-- 联系方式卡片 -->
          <div class="bg-gradient-to-br from-blue-50 to-teal-50 rounded-2xl border border-blue-100 p-6">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5  text-blue-600" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-800">其他联系方式</h3>
            </div>
            <div class="space-y-3 text-sm">
              <div class="flex items-center gap-3 text-gray-600">
                <span class="text-gray-400">邮箱:</span>
                <span class="text-blue-600 font-medium">feedback@community.com</span>
              </div>
              <div class="flex items-center gap-3 text-gray-600">
                <span class="text-gray-400">电话:</span>
                <span class="text-blue-600 font-medium">400-123-4567</span>
              </div>
              <div class="flex items-center gap-3 text-gray-600">
                <span class="text-gray-400">工作时间:</span>
                <span>周一至周五 9:00-18:00</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 主要反馈表单 -->
        <div class="lg:col-span-8">
          <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <!-- 表单头部 -->
            <div class="bg-gradient-to-r from-blue-500 to-teal-500 px-8 py-6">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24"
                       stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
                  </svg>
                </div>
                <div>
                  <h2 class="text-2xl font-bold  text-white">您的声音很重要</h2>
                  <p class="text-blue-100 mt-1">告诉我们您的想法，帮助我们做得更好</p>
                </div>
              </div>
            </div>

            <!-- 表单内容 -->
            <div class="p-8">
              <form @submit.prevent="submitFeedback" class="space-y-6">
                <!-- 反馈类型选择 -->
                <div class="space-y-3">
                  <label class="block text-sm font-medium text-gray-700 mb-3">反馈类型</label>
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div
                      v-for="type in feedbackTypes"
                      :key="type.value"
                      @click="feedback.category = type.value"
                      :class="[
                        'relative p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:shadow-md',
                        feedback.category === type.value 
                          ? 'border-blue-500 bg-blue-50 shadow-sm'
                          : 'border-gray-200 hover:border-gray-300'
                      ]"
                    >
                      <div class="flex flex-col items-center text-center gap-2">
                        <div :class="[
                          'w-8 h-8 rounded-lg flex items-center justify-center',
                          feedback.category === type.value ? 'bg-blue-100' : 'bg-gray-100'
                        ]">
                          <svg xmlns="http://www.w3.org/2000/svg" :class="[
                            'w-4 h-4',
                            feedback.category === type.value ? 'text-blue-600' : 'text-gray-600'
                          ]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path v-if="type.value === 'suggestion'" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            <path v-else-if="type.value === 'bug'" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            <path v-else-if="type.value === 'complaint'" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        </div>
                        <span :class="[
                          'text-sm font-medium',
                          feedback.category === type.value ? 'text-blue-700' : 'text-gray-700'
                        ]">{{ type.label }}</span>
                      </div>
                      <div v-if="feedback.category === type.value"
                           class="absolute -top-1 -right-1 w-5 h-5 blue rounded-full flex items-center justify-center">
                        <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 反馈内容 -->
                <div class="space-y-2">
                  <label for="content" class="block text-sm font-medium text-gray-700">详细描述 <span
                    class="text-red-500">*</span></label>
                  <div class="relative">
                    <textarea
                      id="content"
                      v-model="feedback.content"
                      rows="6"
                      placeholder="请详细描述您遇到的问题或想法，包括具体的操作步骤、期望结果等..."
                      class="w-full px-4 py-3 border border-gray-200 rounded-xl transition-all duration-200 shadow-sm resize-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:outline-none placeholder:text-gray-400 hover:border-gray-300"
                      required
                    ></textarea>
                    <div class="absolute bottom-3 right-3 text-xs text-gray-400">
                      {{ feedback.content.length }}/500
                    </div>
                  </div>
                </div>

                <!-- 联系方式（可选） -->
                <div class="space-y-2">
                  <label for="contact" class="block text-sm font-medium text-gray-700">联系方式 <span
                    class="text-gray-400 text-xs">(可选)</span></label>
                  <input
                    id="contact"
                    v-model="feedback.contact"
                    type="text"
                    placeholder="邮箱或手机号，便于我们回复您"
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:outline-none transition-all duration-200 shadow-sm hover:border-gray-300 placeholder:text-gray-400"
                  />
                </div>

                <!-- 提交按钮 -->
                <div class="flex gap-4 pt-4">
                  <button
                    type="submit"
                    :disabled="isSubmitting"
                    :class="[
                      'flex-1 py-3 px-6 font-semibold rounded-xl transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2',
                      isSubmitting 
                        ? 'bg-gray-400 cursor-not-allowed' 
                        : 'bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-600 hover:to-teal-600 text-white transform hover:-translate-y-0.5'
                    ]"
                  >
                    <svg v-if="isSubmitting" class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                         fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    {{ isSubmitting ? "提交中..." : "提交反馈" }}
                  </button>
                  <button
                    type="button"
                    @click="resetForm"
                    class="px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-all duration-200 shadow-sm hover:shadow-md"
                  >
                    重置
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 成功提示模态框 -->
    <div v-if="showSuccessModal"
         class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
         @click.self="showSuccessModal = false">
      <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full transform transition-all duration-300 animate-in">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">提交成功！</h3>
          <p class="text-gray-600 mb-6">感谢您的反馈！我们会在24小时内处理并回复您。</p>
          <button
            @click="showSuccessModal = false"
            class="w-full py-3 bg-gradient-to-r from-blue-500 to-teal-500 text-white font-medium rounded-xl hover:from-blue-600 hover:to-teal-600 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Feedback",
  data() {
    return {
      isSubmitting: false,
      showSuccessModal: false,
      feedback: {
        category: "",
        content: "",
        contact: ""
      },
      feedbackTypes: [
        {
          value: "suggestion",
          label: "建议"
        },
        {
          value: "bug",
          label: "Bug报告"
        },
        {
          value: "complaint",
          label: "投诉"
        },
        {
          value: "other",
          label: "其他"
        }
      ]
    };
  },
  methods: {
    async submitFeedback() {
      if (!this.feedback.category) {
        this.$toast?.error("请选择反馈类型");
        return;
      }

      this.isSubmitting = true;

      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500));

        console.log("提交的反馈：", this.feedback);

        this.showSuccessModal = true;
        this.resetForm();

        // 显示成功提示
        this.$toast?.success("反馈已提交成功！", {
          position: "bottom-center",
          duration: 3000,
          icon: "check-circle",
          background: "#10b981",
          color: "white"
        });

      } catch (error) {
        console.error("提交反馈失败:", error);
        this.$toast?.error("提交失败，请稍后重试");
      } finally {
        this.isSubmitting = false;
      }
    },

    resetForm() {
      this.feedback = {
        category: "",
        content: "",
        contact: ""
      };
    }
  }
};
</script>

<style scoped>
/* 自定义动画 */
@keyframes animate-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-in {
  animation: animate-in 0.2s ease-out;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 表单聚焦效果增强 */
input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
}

/* 卡片悬停效果 */
.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 按钮悬停效果增强 */
button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}
</style>